import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import kkimg from '../public/22.jpg'
import { NavBar } from 'antd-mobile'
import { Image, Button, Input, Cell, Toast, Card } from 'react-vant'
import { TypeListID, CommentList, NewComment } from '../sevice/NewService'
import mystyle from '../css/News.module.css'

export default function NewDetail() {
    const navigate = useNavigate();
    //新闻的id
    const { id } = useParams();

    useEffect(() => {
        newAsk()
        newcomment()
    }, [])

    //当前页面的新闻
    let [IdList, setIdList] = useState({})
    //当前页面的评论列表
    let [Comments, setComments] = useState([])
    //当前评论数量
    let [CommentNum, setCommentNum] = useState(0)
    let newAsk = async () => {
        let { data } = await TypeListID(id)
        if (data.code == 200) {
            setIdList(data.data)
            // 新闻点赞
            setlikeNum(data.data.likeNum)
        }
    }

    //新闻评论列表
    let newcomment = async () => {

        let { data } = await CommentList({
            newsId: id
        })
        setCommentNum(data.total)
        if (data.code == 200) {
            if (data.rows.length) {
                setComments(data.rows)
            }
        }
    }


    //新闻点赞数
    let [likeNum, setlikeNum] = useState(0)

    let [isLiked, setisLiked] = useState(false)
    const handleLike = () => {
        setisLiked(!isLiked)

        if (!isLiked) {
            setlikeNum(likeNum + 1)
            Toast.info('点赞成功')
        } else {
            setlikeNum(likeNum - 1)
            Toast.info('取消点赞')
        }
    }



    //评论点赞数
    let [iscomLiked, setiscomLiked] = useState(false)
    const commentLike = (id) => {
        setiscomLiked(!iscomLiked)
        // console.log(id);
    }

    // NewComment
    //输入框
    const [value, setValue] = useState('');

    const Addcomment = async () => {
        if (!value == '') {
            let { data } = await NewComment({
                content: value,
                newsId: id
            })
            Toast.info(data.msg)
            newcomment()  //点击发布评论的时候重新加载一下评论区
            setValue('')

        } else {
            Toast.info('请输入内容')
        }
    }




    return (
        <>
            <div style={{ position: 'fixed', left: 0, top: 0, backgroundColor: '#FFFFFF' }}>
                <NavBar onBack={() => { navigate("/Lifepay/news") }}>{IdList.title}</NavBar>
            </div>

            <div style={{ fontSize: 15, marginTop: 40 }}>
                <Image lazyload src={"/api" + IdList.cover} />

                <div style={{ marginTop: 20 }} dangerouslySetInnerHTML={{ __html: IdList.content }} ></div>
            </div>

            <p style={{ marginTop: 20, marginLeft: 200 }}>发布时间/{IdList.createTime}</p>


            <div style={{ marginBottom: 150, padding: 10, fontSize: 20, position: 'relative' }}>
                评论 {CommentNum}

                {Comments.map(item => {
                    return <Card key={item.id}>
                        <Card.Header>
                            <img style={{ width: 40, height: 40, borderRadius: '50%' }} src={kkimg} />
                            <span style={{ marginLeft: 10, fontSize: 15 }} >{item.userName}</span>
                            <span className={mystyle.card} style={{ marginLeft: 160, fontSize: 10, color: 'green' }} >已点赞{item.likeNum}
                                <span style={{ marginLeft: 10, fontSize: 10 }} onClick={() => { commentLike(item.id) }}>
                                    {
                                        iscomLiked ? '💓' : '🖤'
                                        // '👍🏻' : '👎🏻'
                                    }
                                </span>
                            </span>
                        </Card.Header>
                        <Card.Body style={{ marginLeft: 10 }} >{item.content}</Card.Body>
                        <div className={mystyle.commentDate}> {item.commentDate}</div>
                    </Card>
                })}
            </div>
















            <div style={{
                width: '100%', backgroundColor: '#f1e5e5', position: 'fixed', left: 0, bottom: 0,
                borderTop: '0.5px solid grey'
            }}>
                <Cell>
                    <Input
                        placeholder="请输入文本"
                        value={value}
                        onChange={setValue}
                        clearable
                        clearTrigger="always"
                    />
                    <Button type='info' style={{ marginTop: 10, height: 20, }}
                        onClick={() => {
                            Addcomment()
                        }}
                    >发布</Button>

                    <span style={{ marginLeft: 180, fontSize: 10 }} >已点赞 {likeNum}
                        <span style={{ marginLeft: 10, fontSize: 20 }} onClick={() => { handleLike() }}>
                            {
                                isLiked ? '💓' : '🖤'
                                // '👍🏻' : '👎🏻'
                            }
                        </span>
                    </span>
                </Cell>
            </div >
        </>
    )
}
